<!-- 魔方 -->
<template>
	<!-- <view class="rubik-cube" :style="{backgroundColor:backgroundColor,padding:selectedTemplate == 'row1-of2 chang'? '0px':''}"> -->
		<!-- 第一种魔方 -->
<!-- 		<block v-if="selectedTemplate == 'row1-of2'">
			<view class="df rubik-row1-of2 row1-of2">
				<view class="rubik-row-item" v-for="(item, inx) in rubikList" :key="inx" @click="goCommunityindex(item)"
					style="padding: 0;">
					<image :src="$Utils.img(item.imageUrl)" lazy-load="true" mode="widthFix" style="width: 100%;">
					</image>
				</view>
			</view>
		</block> -->

		<!-- 第二种魔方 -->
<!-- 		<block v-if="selectedTemplate == 'row1-of3'">
			<view class="df rubik-row1-of2 row1-of3">
				<view class="rubik-row-item" v-for="(item, inx) in rubikList" :key="inx" @click="goCommunityindex(item)"
					style="padding: 0;">
					<image :src="$Utils.img(item.imageUrl)" lazy-load="true" mode="widthFix" style="width: 100%;">
					</image>
				</view>
			</view>
		</block> -->

		<!-- 第三种魔方 -->
<!-- 		<block v-if="selectedTemplate == 'row1-of4'">
			<view class="df rubik-row1-of2 row1-of4">
				<view class="rubik-row-item" v-for="(item, inx) in rubikList" :key="inx" @click="goCommunityindex(item)"
					style="padding: 0;">
					<image :src="$Utils.img(item.imageUrl)" lazy-load="true" mode="widthFix" style="width: 100%;">
					</image>
				</view>
			</view>
		</block> -->

		<!-- 第四种魔方 -->
<!-- 		<block v-if="selectedTemplate == 'row2-lt-of2-rt'">
			<view class="df row2-lt-of2-rt" style="flex-wrap: wrap;">
				<view class="rubik-row-item" v-for="(item, inx) in rubikList" :key="inx"
					@click="goCommunityindex(item)">
					<image :src="$Utils.img(item.imageUrl)" lazy-load="true" mode="widthFix" style="width: 100%;">
					</image>
				</view>
			</view>
		</block> -->

		<!-- 第五种魔方 -->
<!-- 		<block v-if="selectedTemplate == 'row1-lt-of2-rt'">
			<view class="df rubik-row1-of2 row1-lt-of2-rt">
				<view class="rubik-row-item" @click="goCommunityindex(rubikList[0])" style="padding: 0;">
					<image :src="$Utils.img(rubikList[0].imageUrl)" lazy-load="true" mode="widthFix"
						style="width: 100%;"></image>
				</view>
				<view class="rubik-row-item-2">
					<image :src="$Utils.img(rubikList[1].imageUrl)" lazy-load="true" mode="widthFix"
						style="width: 100%;" @click="goCommunityindex(rubikList[1])"></image>
					<image :src="$Utils.img(rubikList[2].imageUrl)" lazy-load="true" mode="widthFix"
						style="width: 100%;" @click="goCommunityindex(rubikList[2])"></image>
				</view>
			</view>
		</block> -->

		<!-- 第六种魔方 -->
<!-- 		<block v-if="selectedTemplate == 'row1-tp-of2-bm'">
			<view class="rubik-row1-tp-of2-bm">
				<view class="rubik-row-item" @click="goCommunityindex(rubikList[0])">
					<image :src="$Utils.img(rubikList[0].imageUrl)" lazy-load="true" mode="widthFix"
						style="width: 100%;"></image>
				</view>
				<view class="rubik-row-item-two">
					<image :src="$Utils.img(rubikList[1].imageUrl)" lazy-load="true" mode="widthFix"
						style="width: 100%;" @click="goCommunityindex(rubikList[1])"></image>
					<image :src="$Utils.img(rubikList[2].imageUrl)" lazy-load="true" mode="widthFix"
						style="width: 100%;" @click="goCommunityindex(rubikList[2])"></image>
				</view>
			</view>
		</block> -->

		<!-- 第七种魔方 -->
<!-- 		<block v-if="selectedTemplate == 'row1-lt-of1-tp-of2-bm'">
			<view class="df rubik-row1-of2 row1-lt-of1-tp-of2-bm">
				<view class="rubik-row-item " @click="goCommunityindex(rubikList[0])" style="padding: 0;">
					<image :src="$Utils.img(rubikList[0].imageUrl)" lazy-load="true" mode="widthFix"
						style="width: 100%;"></image>
				</view>
				<view class="rubik-row-item" style="padding: 0;">
					<image class="rubik-row-item-top-7" :src="$Utils.img(rubikList[1].imageUrl)" lazy-load="true"
						mode="widthFix" style="width: 100%;" @click="goCommunityindex(rubikList[1])"></image>
					<view class="rubik-row-item rubik-row-item-bottom-7" style="display: flex;width: 100%;">
						<image :src="$Utils.img(rubikList[2].imageUrl)" lazy-load="true" mode="widthFix"
							style="width: 100%;" @click="goCommunityindex(rubikList[2])"></image>
						<image :src="$Utils.img(rubikList[3].imageUrl)" lazy-load="true" mode="widthFix"
							style="width: 100%;" @click="goCommunityindex(rubikList[3])"></image>
					</view>
				</view>
			</view>
		</block> -->
		
		<!-- 第八种魔方 -->
<!-- 		<block v-if="selectedTemplate == 'row1-of2 chang'">
			<view class="rubik8">
				<view class="rubik-row-item8" v-for="(item, inx) in rubikList" :key="inx" @click="goCommunityindex(item)">
					<image :src="$Utils.img(item.imageUrl)" lazy-load="true" mode="widthFix"></image>
				</view>
			</view>
		</block> -->

	<!-- </view> -->
	
	
	
	
	
	
	
	<view class="rubik-cube-Contents" :style="{backgroundColor:backgroundColor}">
		<!-- 第一种魔方 -->
		<block v-if="selectedTemplate == 'row1-of2'">
			<view class="rubik-One-item">
				<view class="rubik-One-item-img" v-for="(item, inx) in rubikList" :key="inx" @click="goCommunityindex(item)">
					<image :src="$Utils.img(item.imageUrl)" lazy-load="true" mode="">
					</image>
				</view>
			</view>
		</block>
	
		<!-- 第二种魔方 -->
		<block v-if="selectedTemplate == 'row1-of3'">
			<view class="rubik-One-item">
				<view class="rubik-Two-item-img" v-for="(item, inx) in rubikList" :key="inx" @click="goCommunityindex(item)">
					<image :src="$Utils.img(item.imageUrl)" lazy-load="true" mode="">
					</image>
				</view>
			</view>
		</block>
	
		<!-- 第三种魔方 -->
		<block v-if="selectedTemplate == 'row1-of4'">
			<view class="rubik-One-item">
				<view class="rubik-Three-item-img" v-for="(item, inx) in rubikList" :key="inx" @click="goCommunityindex(item)">
					<image :src="$Utils.img(item.imageUrl)" lazy-load="true" mode="">
					</image>
				</view>
			</view>
		</block>
	
		<!-- 第四种魔方 -->
		<block v-if="selectedTemplate == 'row2-lt-of2-rt'">
			<view class="rubik-One-item" style="flex-wrap: wrap;">
				<view class="rubik-Four-item-img" v-for="(item, inx) in rubikList" :key="inx" @click="goCommunityindex(item)">
					<image :src="$Utils.img(item.imageUrl)" lazy-load="true" mode="">
					</image>
				</view>
			</view>
		</block>
	
		<!-- 第五种魔方 -->
		<block v-if="selectedTemplate == 'row1-lt-of2-rt'">
			<view class="rubik-One-item" style="align-items: initial;">
				<view class="rubik-Five-item-img" @click="goCommunityindex(rubikList[0])">
					<image :src="$Utils.img(rubikList[0].imageUrl)" lazy-load="true" mode=""></image>
				</view>
				<view class="rubik-Five-item-img">
					<image :src="$Utils.img(rubikList[1].imageUrl)" lazy-load="true" mode="" @click="goCommunityindex(rubikList[1])" style="margin-bottom: 16rpx;"></image>
					<image :src="$Utils.img(rubikList[2].imageUrl)" lazy-load="true" mode="" @click="goCommunityindex(rubikList[2])"></image>
				</view>
			</view>
		</block>
	
		<!-- 第六种魔方 -->
		<block v-if="selectedTemplate == 'row1-tp-of2-bm'">
			<view class="rubik-Two-item">
				<view class="rubik-Six-item-img" @click="goCommunityindex(rubikList[0])">
					<image :src="$Utils.img(rubikList[0].imageUrl)" lazy-load="true" mode=""></image>
				</view>
				<view class="rubik-Six-item-Fl">
					<view class="rubik-Six-item-img-Item">
						<image :src="$Utils.img(rubikList[1].imageUrl)" lazy-load="true" mode="" @click="goCommunityindex(rubikList[1])"></image>
					</view>
					<view class="rubik-Six-item-img-Item">
						<image :src="$Utils.img(rubikList[2].imageUrl)" lazy-load="true" mode="" @click="goCommunityindex(rubikList[2])"></image>
					</view>
				</view>
			</view>
		</block>
	
		<!-- 第七种魔方 -->
		<block v-if="selectedTemplate == 'row1-lt-of1-tp-of2-bm'">
			<view class="rubik-One-item">
				<view class="rubik-Five-item-img" @click="goCommunityindex(rubikList[0])" >
					<image :src="$Utils.img(rubikList[0].imageUrl)" lazy-load="true" mode=""></image>
				</view>
				<view class="rubik-Seven-item-bj">
					<view class="rubik-Seven-item-img">
						<image :src="$Utils.img(rubikList[1].imageUrl)" lazy-load="true" mode="" @click="goCommunityindex(rubikList[1])"></image>
					</view>
					<view class="rubik-Seven-item-bj-Fl" >
						<view class="rubik-Seven-item-img-bottom">
							<image :src="$Utils.img(rubikList[2].imageUrl)" lazy-load="true" mode="" @click="goCommunityindex(rubikList[2])"></image>
						</view>
						<view class="rubik-Seven-item-img-bottom">
							<image :src="$Utils.img(rubikList[3].imageUrl)" lazy-load="true" mode="" @click="goCommunityindex(rubikList[3])"></image>
						</view>
					</view>
				</view>
			</view>
		</block>
		
		<!-- 第八种魔方 -->
		<block v-if="selectedTemplate == 'row1-of2 chang'">
			<view class="rubik-One-item" style="align-items: initial;">
				<view class="rubik-eight-item-img" v-for="(item, inx) in rubikList" :key="inx" @click="goCommunityindex(item)">
					<image :src="$Utils.img(item.imageUrl)" lazy-load="true" mode="widthFix"></image>
				</view>
			</view>
		</block>
		
		<!-- 第九种魔方 -->

		<block v-if="selectedTemplate == 'row1-of3 chang'">
			<view class="rubik-One-item" style="align-items: initial;margin-top: 20rpx;">
				<view class="rubik-nine-item-img" v-for="(item, inx) in rubikList" :key="inx" @click="goCommunityindex(item)">
					<image :src="$Utils.img(item.imageUrl)" lazy-load="true" mode="widthFix"></image>
				</view>
			</view>
		</block>
		
		<!-- 第十种魔方 -->
		<block v-if="selectedTemplate == 'row1-of4 chang'">
			<view class="rubik-One-item" style="align-items: initial;margin-top: 20rpx;">
				<view class="rubik-ten-item-img" v-for="(item, inx) in rubikList" :key="inx" @click="goCommunityindex(item)">
					<image :src="$Utils.img(item.imageUrl)" lazy-load="true" mode="widthFix"></image>
				</view>
			</view>
		</block>
	
	</view>
	
	
</template>

<script>
	import Qs from 'qs';
	export default {
		name: 'rubik-cube',
		data() {
			return {};
		},
		props: {
			selectedTemplate: {
				type: String,
				default: ''
			},
			rubikList: {
				type: Array,
				default: () => {
					return [];
				}
			},
			backgroundColor: {
				type: String,
				default: ''
			}
		},
		methods: {
			goCommunityindex(val) {
				let len = Object.keys(val.link);
				// console.log(val.link)
				if (len.length > 0) {
					if (val.link.wap_url == '') {
						this.$Utils.tip('暂未开放，敬请期待(#^.^#)')
						return false
					}
					if (val.link.addon_title == '自定义链接') {
						// #ifdef H5
						location.href = val.link.wap_url;
						// #endif
						// #ifdef MP-WEIXIN
						let newArr = val.link.wap_url.split('?');
						let newArrUrl = newArr[0].split('#');
						// console.log("newArrUrl", newArrUrl)
						let newQuery = {};
						if (newArr.length > 1) {
							newQuery = Qs.parse(newArr[1]);
						}
						this.$Router.push({
							path: newArrUrl[1],
							query: newQuery
						});
						// #endif
					} else {
						let newArr = val.link.wap_url.split('?');
						let newQuery = {};
						if (newArr.length > 1) {
							newQuery = Qs.parse(newArr[1]);
						}
						this.$Router.push({
							path: newArr[0],
							query: newQuery
						});
					}
				} else {
					this.$Utils.tip('暂未开放，敬请期待(#^.^#)')
					return false
				}
			}
		},
		mounted() {
			// console.log("rubikList",this.rubikList)
			// console.log("backgroundColor",this.backgroundColor)
		}
	};
</script>

<style lang="scss" scoped>
	
	image {
		width: 100%;
		height: 100%;
		border-radius: 24rpx;
	}
	
	
	// 先不能动的代码
	
	/deep/.rubik8{
		width: 95%;
		margin: 0 auto;
		display: flex;
		justify-content: space-around;
		padding: 20rpx 0rpx;
		.rubik-row-item8{
			width: 337rpx!important;
			border-radius: 24rpx;
			image {
				width: 100%;
				border-radius: 24rpx;
			}
		}
	}
	
	.rubik-cube {
		padding: 20rpx 10rpx 0rpx 10rpx;

		// 第一种样式
		.rubik-row1-of2 {
			align-items: center;
			padding: 0 19rpx;

			.rubik-row-item {
				flex: 1;
				height: 444rpx;
				margin-right: 16rpx;
				border-radius: 24rpx;

				image {
					width: 100%;
					height: 444rpx !important;
					border-radius: 24rpx;
				}


				.rubik-row-item-top-7 {
					height: calc(444rpx / 2 - 8rpx) !important;

					image {
						width: 100%;
						height: calc(444rpx / 2) !important;
					}
				}

				.rubik-row-item-bottom-7 {
					display: flex;
					height: calc(444rpx / 2 - 8rpx) !important;
					justify-content: space-between;
					margin: 16rpx 0 0 0 !important;

					image {
						width: 48% !important;
						height: calc(444rpx / 2 - 8rpx) !important;
					}
				}
			}

			.rubik-row-item:first-child {
				margin-left: 0;
			}

			.rubik-row-item:last-child {
				margin-right: 0;
			}
		}

		/deep/ .row1-of4 {
			height: 160rpx;

			.rubik-row-item {
				width: 160rpx;
				height: 160rpx !important;

				image {
					width: 160rpx;
					height: 160rpx !important;
				}
			}
		}

		/deep/ .row1-of2 {
			height: 337rpx;

			.rubik-row-item {
				width: 337rpx;
				height: 337rpx !important;

				image {
					width: 337rpx;
					height: 337rpx !important;
				}
			}
		}
		
		/deep/ .row1-of3 {
			height: 219rpx;

			.rubik-row-item {
				width: 219rpx;
				height: 219rpx !important;

				image {
					width: 219rpx;
					height: 219rpx !important;
				}
			}
		}

		/deep/ .row1-lt-of2-rt {
			height: 690rpx;

			.rubik-row-item {
				width: 337rpx !important;
				height: 690rpx !important;

				image {
					height: 690rpx !important;
				}
			}

			.rubik-row-item-2 {
				width: 337rpx !important;
				height: 690rpx !important;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				border-radius: 24rpx;

				image {
					width: 337rpx !important;
					height: 337rpx !important;
					border-radius: 24rpx;
				}
			}
		}

		.row2-lt-of2-rt {
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;

			.rubik-row-item {
				width: 337rpx !important;
				height: 337rpx !important;
				margin-right: 16rpx;
				border-radius: 24rpx;
				margin-bottom: 16rpx;

				image {
					width: 337rpx;
					height: 337rpx !important;
					border-radius: 24rpx;
				}
			}

			.rubik-row-item:nth-of-type(2n) {
				margin-right: 0;
			}

			.rubik-row-item:first-child {
				margin-left: 0;
			}

			.rubik-row-item:last-child {
				margin-right: 0;
			}
		}

		// 第六种魔方
		.rubik-row1-tp-of2-bm {
			flex-direction: column;
			justify-content: space-between;
			padding: 0 20rpx;
			.rubik-row-item {
				width: 100%;
				height: 337rpx;
				border-radius: 24rpx;

				image {
					height: 337rpx !important;
					border-radius: 24rpx;
				}
			}

			.rubik-row-item-two {
				display: flex;
				justify-content: space-between;
				width: 100%;
				height: 337rpx;
				margin-top: 16rpx;

				image {
					height: 337rpx !important;
					width: 337rpx !important;
					border-radius: 24rpx;
				}

				image:first-child {
					margin-right: 16rpx;
				}
			}
		}

		.row1-lt-of1-tp-of2-bm {
			height: 690rpx;

			.rubik-row-item {
				width: 337rpx !important;
				height: 690rpx !important;

				image {
					width: 337rpx !important;
					height: 690rpx !important;
				}

				.rubik-row-item-top-7 {
					width: 337rpx !important;
					height: 337rpx !important;
				}

				.rubik-row-item-bottom-7 {
					display: flex;
					justify-content: space-between;

					image {
						width: 161rpx !important;
						height: 337rpx !important;
					}
				}
			}
		}

	}

	// 先不能动的代码
	
	
	// 新魔方样式
	.rubik-cube-Contents{
		width: 100%;
		margin: 0 auto;
		padding-top: 20rpx;
		// padding-bottom: 20rpx;
	}
	
	.rubik-One-item{
		width: 95%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	
	// 第一种魔方
	.rubik-One-item-img{
		width: 337rpx;
		height: 337rpx;
		border-radius: 24rpx;
	}
	// 第二种魔方
	.rubik-Two-item-img{
		width: 219rpx;
		height: 219rpx;
		border-radius: 24rpx;
	}
	// 第三种魔方
	.rubik-Three-item-img{
		width: 160rpx;
		height: 160rpx;
		border-radius: 24rpx;
	}
	// 第四种魔方
	.rubik-Four-item-img{
		width: 337rpx;
		height: 337rpx;
		border-radius: 24rpx;
	}
	// 第四种魔方
	.rubik-Four-item-img:nth-child(1){
		margin-bottom: 16rpx;
	}
	// 第四种魔方
	.rubik-Four-item-img:nth-child(2){
		margin-bottom: 16rpx;
	}
	// 第五种魔方
	.rubik-Five-item-img{
		width: 337rpx;
		height: 690rpx;
		border-radius: 24rpx;
	}
	// 第五种魔方
	.rubik-Five-item-img:last-child{
		width: 337rpx;
		height: 337rpx;
		border-radius: 24rpx;
	}
	// 第六种魔方
	.rubik-Two-item{
		width: 95%;
		margin: 0 auto;
	}
	// 第六种魔方
	.rubik-Six-item-img{
		width: 690rpx;
		height: 337rpx;
		border-radius: 24rpx;
	}
	// 第六种魔方
	.rubik-Six-item-img:first-child{
		margin: 0 auto;
	}
	// 第六种魔方
	.rubik-Six-item-Fl{
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 16rpx;
	}
	// 第六种魔方
	.rubik-Six-item-img-Item{
		width: 337rpx;
		height: 337rpx;
		border-radius: 24rpx;
	}
	// 第7种魔方
	.rubik-Seven-item-bj{
		.rubik-Seven-item-img{
			width: 337rpx;
			height: 337rpx;
			border-radius: 24rpx;
			margin-bottom: 16rpx;
		}
		.rubik-Seven-item-bj-Fl{
			display: flex;
			align-items: center;
			justify-content: space-around;
		}
		.rubik-Seven-item-img-bottom{
			width: 161rpx;
			height: 337rpx;
			border-radius: 24rpx;
		}
	}
	// 第8种魔方
	.rubik-eight-item-img{
		width: 337rpx;
		border-radius: 24rpx;
	}
	// 第9种魔方
	.rubik-nine-item-img{
		width: 220rpx;
		border-radius: 24rpx;
	}
	// 第10种魔方
	.rubik-ten-item-img{
		width: 160rpx;
		border-radius: 24rpx;
	}
	// 新魔方样式
	
</style>
